import {
  init,
  classModule,
  propsModule,
  styleModule,
  eventListenersModule,
  h,
} from 'snabbdom'
import myH from './myH'
import myPatch from './myPatch'
const patch = init([
  // Init patch function with chosen modules
  classModule, // makes it easy to toggle classes
  propsModule, // for setting properties on DOM elements
  styleModule, // handles styling on elements with support for animations
  eventListenersModule, // attaches event listeners
])
const container = document.getElementById('container')
const btn = document.getElementById('btn')

const Vode = h('ul', {}, [
  h('li', {}, 'A'),
  h('li', {}, 'B'),
  h('li', {}, 'C'),
  h('li', {}, 'D'),
])
const Vode1 = h('ul', {}, [
  h('li', {}, 'E'),
  h('li', {}, 'A'),
  h('li', {}, 'B'),
  h('li', {}, 'C'),
  h('li', {}, 'D'),
])
const myVode = myH('ul', {}, [
  myH('li', { key: 'a' }, 'A'),
  myH('li', { key: 'b' }, 'B'),
  myH('li', { key: 'c' }, 'C'),
  myH('li', { key: 'e' }, 'E'),
])
const myVode1 = myH('ul', {}, [
  myH('li', { key: 'q' }, 'Q'),
  myH('li', { key: 'c' }, 'C'),
  myH('li', { key: 'm' }, 'M'),

  // myH('li', { key: 'd' }, 'D'),
  // myH('li', { key: 'e' }, 'E'),
])

const myVode2 = myH('h1', {}, '我是h1标签')
const myVode3 = myH('h3', {}, '我是h3标签')
// myPatch(container, myVode2)
// patch(container, myVode2)
myPatch(container, myVode)

// myPatch(container, myVode)

// myPatch(container, myVode)
// console.log(patch)
// myPatch(container, myVode)
//为什么执行三次patch函数，只有第一次生效？

btn.onclick = function () {
  console.log('click')
  // 旧节点不存在children,新节点存在children的情况测试
  myPatch(myVode, myVode1)
  // myPatch(myVode, myVode1)
  // myPatch(myVode2, myVode3)
  // patch(myVode2, myVode3)
  // myPatch(myVode, myVode1)
}
